<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>13.渲染到纹理</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>
	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		attribute vec3 a_normal;

		uniform mat4 u_projection;
		uniform mat4 u_view;
		uniform mat4 u_world;
		attribute vec2 a_texcoord;
		
		varying vec2 v_texCoord;

		varying vec3 v_normal;
		
		varying vec3 v_worldPosition;
		varying vec3 v_worldNormal;
		
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			v_texCoord=a_texcoord;
			v_normal = normalize(a_position.xyz);
			
			v_worldPosition = (u_world * a_position).xyz;

			// orient the normals and pass to the fragment shader
			v_worldNormal = mat3(u_world) * a_normal;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment">
		precision mediump float;
		
		uniform sampler2D u_texture;
		varying vec2 v_texCoord;
		void main(){
			vec4 diffuseColor = texture2D(u_texture, v_texCoord);//纹理
			gl_FragColor = diffuseColor;
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width=window.innerWidth
		canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex","fragment"])
		const cubeBufferInfo = primitives.createCubeBufferInfo(
			gl,
			50
		);
		gl.useProgram(programInfo.program)
		const cameraMatrix = m4.lookAt([50,50,50],[0,0,0],[0,1,0])
		const viewMatrix=m4.inverse(cameraMatrix)
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		
		var texture = gl.createTexture();
		const arrs=[]
		var cameraPosition = [0, 0, 2];
		var world=m4.translation(0, 0, 0)
		let t=0
		const image=new Image();
		var width = 1024;
		var height = 1024;
		var data = new Uint8Array(width * height * 4)
		gl.bindTexture(gl.TEXTURE_2D, texture);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
		// 将图像数据加载到纹理对象中
		gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
		// gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,256,256,0, gl.UNSIGNED_BYTE, data);
	
	
    const level = 0;
    const internalFormat = gl.RGBA;
    const border = 0;
    const format = gl.RGBA;
    const type = gl.UNSIGNED_BYTE;
    var data = null;
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,width, height, border,format, type, data);

	gl.generateMipmap(gl.TEXTURE_2D);

	gl.viewport(0, 0, width, height);
	const fb = gl.createFramebuffer();
	gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
	
	// 附加纹理为第一个颜色附件
	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
	const targetTexture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, targetTexture);
	image.onload=(e=>{
		gl.bindTexture(gl.TEXTURE_2D, targetTexture);
		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

	})	
		image.src = '/webgl学习.png';
		// image.src = '/f-texture.png';
		gl.enable(gl.CULL_FACE);
		gl.enable(gl.DEPTH_TEST);
		setInterval(()=>{
			world = m4.yRotate(world, 0.001)
			const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);
			
			function drawCube(){
				webglUtils.setBuffersAndAttributes(gl, programInfo, cubeBufferInfo);
				webglUtils.setUniforms(programInfo, {
					u_view: viewMatrix,					//视图
					u_projection: projectionMatrix,		//投影
					u_world:world,	//世界
				});
				
				webglUtils.drawBufferInfo(gl, cubeBufferInfo);
			}
			
			gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
			gl.bindTexture(gl.TEXTURE_2D, targetTexture);
			gl.viewport(0, 0, width, height);
			gl.clearColor(0.8, 1, 1, 1);   // clear to blue
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
			drawCube()
			gl.bindFramebuffer(gl.FRAMEBUFFER, null);
			gl.bindTexture(gl.TEXTURE_2D, texture);
			gl.viewport(0, 0, canvas.width,canvas.height);
			gl.clearColor(1, 1, 1, 1);   // clear to blue
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
			drawCube()
		},0)
	</script>
</body>
</html>